<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" />
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}" ></script>
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <!--<script th:inline="javascript" th:src="@{/js/addPatient.js}"></script>-->
    <style type="text/css">
        h1{
            text-align: center;
        }
        .all{
            margin: auto;
            width: 500px;
            text-align: center;
        }
        button{
            margin-top: 20px;

        }
    </style>
</head>
<body style="">
    <h1>用户注册</h1>
    <div class="all">
        <form th:action="@{addPatient.do}" method="post" >
            <div class="form-group">
                <label class="col-sm-2 control-label">姓名:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="name" id="name" placeholder="name">
                    <font color="red"></font>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">手机号:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="phone" id="phone" placeholder="phone">
                    <font color="red"></font>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">身份证号:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="IDCard" id="IDCard" placeholder="IDCard">
                    <font color="red"></font>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">密码:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="password" id="password" placeholder="password">
                    <font color="red"></font>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">地址:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="address" id="address" placeholder="address">
                    <font color="red"></font>
                </div>
            </div>
            <label class="col-sm-2 control-label">性别:</label>
            <input type="radio" name="gender" id="gender" checked="checked" value="女">女
            <input type="radio" name="gender" value="男">男<br>
            <div>
                <button type="submit" class="btn btn-primary">提交</button>
                <button type="reset" class="btn btn-primary">重置</button>
            </div>
        </form>
    </div>
</body>

<script th:inline="javascript">
    $(function (){
        var name = $("#name");
        var phone = $("#phone");
        var IDCard = $("#IDCard");
        var password = $("#password");
        var address = $("#address");

        var imgYes = "<img width='15px' src=/img/y.png/>";
        var imgNo = "<img width='15px' src=/img/n.png />";
        name.next().html("*");
        phone.next().html("*");
        IDCard.next().html("*");
        password.next().html("*");
        address.next().html("*");


        name.bind("focus",function(){
            validateTip(name.next(),{"color":"#666666"},"* 用户名长度必须是大于1小于10的字符",false);
        }).bind("blur",function(){
            if(name.val() != null && name.val().length > 1
                && name.val().length < 10){
                validateTip(name.next(),{"color":"green"},imgYes,true);
            }else{
                validateTip(name.next(),{"color":"red"},imgNo+" 用户名输入的不符合规范，请重新输入",false);
            }

        });

        phone.bind("focus",function(){
            validateTip(phone.next(),{"color":"#666666"},"* 请输入手机号",false);
        }).bind("blur",function(){
            var patrn=/^(13[0-9]|15[0-9]|18[0-9])\d{8}$/;
            if(phone.val().match(patrn)){
                validateTip(phone.next(),{"color":"green"},imgYes,true);
            }else{
                validateTip(phone.next(),{"color":"red"},imgNo + " 您输入的手机号格式不正确",false);
            }
        });

        IDCard.bind("focus",function(){
            validateTip(IDCard.next(),{"color":"#666666"},"* 请输入身份证号",false);
        }).bind("blur",function(){
            var patrn= /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if(IDCard.val().match(patrn)){
                validateTip(IDCard.next(),{"color":"green"},imgYes,true);
            }else{
                validateTip(IDCard.next(),{"color":"red"},imgNo + " 您输入的身份证号格式不正确",false);
            }
        });

        password.bind("focus",function(){
            validateTip(password.next(),{"color":"#666666"},"* 密码长度必须是大于6小于20",false);
        }).bind("blur",function(){
            if(password.val() != null && password.val().length >= 6
                && password.val().length < 20 ){
                validateTip(password.next(),{"color":"green"},imgYes,true);
            }else{
                validateTip(password.next(),{"color":"red"},imgNo + " 您输入密码不符合规范，请重新输入",false);
            }
        });


        address.bind("focus",function(){
            validateTip(address.next(),{"color":"#666666"},"* 地址长度必须是大于1小于20的字符",false);
        }).bind("blur",function(){
            if(address.val() != null && address.val().length > 1
                && address.val().length < 20){
                validateTip(address.next(),{"color":"green"},imgYes,true);
            }else{
                validateTip(address.next(),{"color":"red"},imgNo+" 您输入的地址不符合规范，请重新输入",false);
            }

        });
    });
</script>
</html>